<template>
	<h1>Search</h1>
	<nut-searchbar v-model="searchValue" @change="onlyToSuggest">
		<template v-slot:rightout>
			<nut-button type="primary" size="small" @click="onSearch">搜索</nut-button>
		</template>
	</nut-searchbar>

	<keep-alive>
	
		<component :is="currentComponet" :data="data.data"></component>
	</keep-alive>
</template>

<script lang="ts" setup>
	import {
		ref,
		markRaw,
		onMounted,
		reactive
	} from 'vue'
	import SearchResult from '_c/SearchResult.vue'
	import SearchSuggest from '_c/SearchSuggest.vue'
	import router from '@/router'
	import {
		storeToRefs
	} from 'pinia'


	const data = reactive({
		"data": []
	})

	
	//获取数据1.
	import {
		useCommonStore
	} from '@/store/common'
	const store = useCommonStore()
	console.log(store)
	//结构数据为响应式数据2.
	console.log(store.recentSearch)
	const {
		recentSearch,
		other
	} = storeToRefs(store)
	console.log(recentSearch.value)
	console.log(store.getRecentSearch)



	const searchValue = ref(router.currentRoute.value.query.searchkey)
	const lookup = {
		"SearchResult": SearchResult,
		"SearchSuggest": SearchSuggest
	}

	const currentComponet = ref(null)

	onMounted(() => {
		switchChild()
	})

	function switchChild() {
		console.log('switchChild')
		if (!searchValue.value) {
			changeToSuggest()
		} else {
			changeToResult()
		}
	}

	function onlyToSuggest() {
		console.log("change to suggest")
		if (!searchValue.value) {
			changeToSuggest()
		}
	}

	function changeToSuggest() {
		console.log('跳转到suggest')
		currentComponet.value = markRaw(lookup['SearchSuggest'])
	}

	function changeToResult() {
		console.log('跳转到Result')
		data.data = [{
			id: 1,
			imgUrl: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
			title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
			price: '388',
			vipPrice: '378',
			shopDesc: '自营',
			delivery: '厂商配送',
			shopName: '阳澄湖大闸蟹自营店>'
		}, {
			id: 2,
			imgUrl: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
			title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
			price: '388',
			vipPrice: '378',
			shopDesc: '自营',
			delivery: '厂商配送',
			shopName: '阳澄湖大闸蟹自营店>'
		}, {
			id: 3,
			imgUrl: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
			title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
			price: '388',
			vipPrice: '378',
			shopDesc: '自营',
			delivery: '厂商配送',
			shopName: '阳澄湖大闸蟹自营店>'
		}]
		
		currentComponet.value = markRaw(lookup['SearchResult'])
	}

	function onSearch() {
		console.log("获取搜索结果")
		store.saveRecentSearch(searchValue.value)
		console.log(recentSearch.value)
		if (!searchValue.value) {
			router.push({
				name: "search",
			})
			changeToSuggest()
		} else {


			router.push({
				name: "search",
				query: {
					"searchkey": searchValue.value
				}
			})
			changeToResult()
		}
	}
</script>

<style>
</style>
